<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <meta charset="UTF-8">
    <style>
        .outerDiv{
            width: 500px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224); 
        }
        .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
    }
    .d1{
        background-color: greenyellow;
       float: right; 
    }
    .d2{
        background-color: rgb(79, 230, 124);
        float: right;
    }
    .d3{
        background-color: rgb(26, 165, 208);
        float: none;
    }
    </style>
<body>
    <!--CSS 浮动
    CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），
    直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    float : left 向左浮动
            rigth 向右浮动
            none  默认值，元素不浮动，并会显示在其在文本中出现的位置
    优点：
       浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
       文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。  
    -->
       <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
       </div>
</body>
</html>